<template>
    <div class=" header main">
        <span id="header">
            <span>
                <span>{{mname}}</span>
                <el-button type="primary" plain v-if="this.principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
            </span>
        </span>
<!--        导航栏-->
        <div style="width: 80%">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     active-text-color="red"
                     style="font-weight:bold">
                <el-menu-item index="4" @click="$router.push('/shouye')">首页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('/product')">商品展示</el-menu-item>
                <el-menu-item index="3" @click="$router.push('/activity')">专享活动</el-menu-item>
                <el-menu-item index="1" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                <el-menu-item index="5" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
            </el-menu>
        </div>

<!--        顶部-->
        <div class="brandsDiv">
            <ul class="brands">
                <li clstag="channel|keycount|1839|brand_6_1">
                    <a href="//aokang.jd.com/" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5932/277/3198966620/3185/b342ac35/594ce99eNfe23133f.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_2">
                    <a href="//mall.jd.com/index-608668.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5287/185/1175725922/5743/9e724cfe/590c4568Na30ce06c.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_4">
                    <a href="https://mall.jd.com/index-20550.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t24505/176/41565957/3539/bd10e5d3/5b2374ddN282c0469.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_3"><a href="//mall.jd.com/index-53379.html" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4546/238/4271202928/3497/7bb3b13b/590c45b3N81337e85.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_5"><a href="//qipilang.jd.com/" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t5800/361/4425612374/2780/4f9a4d66/594de176Nab056268.png!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_6">
                    <a href="https://mall.jd.com/index-35324.html?cpdad=1DLSUE" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t9898/257/294758224/3973/23d11cd0/59cb55f0Nb8e1704d.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_7"><a href="https://mall.jd.com/index-184352.html" target="_blank">
                    <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t8755/133/778687037/3117/aca98a6d/59ae5f6dNbce03bb6.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_0">
                    <a href="//mall.jd.com/index-115708.html" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t4288/308/3058772343/4004/4507d308/58d9dd35N3f993761.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_8">
                    <a href="https://mall.jd.com/index-68668.html" target="_blank">
                        <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4180/289/3052404473/7699/f43f16da/58d9dc68N474601cd.jpg!q95.webp"><em></em>
                    </a>
                </li>
            </ul>
        </div>


        <center>
            <table width="70%" border="0" cellpadding="0" cellspacing="0" >

                <br/>
                <tr>
                    <td style="vertical-align:top;width: 20%">
                        <div style="width: 400px;height: 260px; margin:10px auto;"
                             v-for="(l,item) in list" :key="item" >
                            <img style="width:348px;height: 240px" class="productPicWidth" :src="getUrl(l.tbPrdInfoList.picPath)" alt="">
                        </div>
                    </td>

                    <td style="vertical-align:top;width: 50%;">
                        <div style="height: 260px;margin:10px auto;text-align:left;" v-for="(i,index) in list" :key="index">
                            <br/><br/>
                            <hr/>
                            <h3 style="color: #52c9ff" @click="$router.replace({name:'xq',params:{tid:i.tid}})">{{i.tbPrdInfoList.labelName}}</h3>
                            商品单价<span class="price" style="color: #99a9bf">￥ <strong>{{i.tbPrdInfoList.price }}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="price"><span style="font-size: 15px;color: #99a9bf">数量：</span> <strong>{{i.count}}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            合计金额<span class="price" style="color: red">￥ <strong>{{i.tbPrdInfoList.price * i.count}}</strong></span>
                            <p>商品描述:{{i.tbPrdInfoList.shortDesc}}</p>
                            <hr/>
                            <br/><br/>
                        </div>
                    </td>

                    <td style="vertical-align:top;width: 20%;">
                        <div style="height: 260px;margin:10px 10px;text-align:left;"  v-for="(i,index) in list" :key="index">
                            <br/><br/><br/>
                            <el-button type="warning" round @click="gotoBuy(i)" plain style="width: 150px">立即购买</el-button>
                            <br/><br/><br/>
                            <el-button type="danger" round @click="del(i.sid)" plain style="width: 150px">移出购物车</el-button>

                        </div>
                    </td>
                </tr>
            </table>
        </center>

        <!-- 底部-->
        <div>
            <center>
                <table width="70%" border="0" cellpadding="0" cellspacing="0" >
                    <tr>
                        <td colspan="3">
                            <img src="../assets/img/1004.jpg" width="100%">
                            <img src="../assets/img/2006.jpg" width="100%">
                        </td>
                    </tr>
                </table>
            </center>
            <div class="img">
                <img src="../assets/img/d0.png" style="width: 100%;">
            </div>
            <div class = "under">
                <a href="#" target="_blank" rel="nofollow">免费声明 </a>
                <a href="#" target="_blank" rel="nofollow">关于我们 </a>
                <a href="#" target="_blank" rel="nofollow">支付方式 </a>
                <a href="#" target="_blank" rel="nofollow">联系我们 </a>
                <a href="#" target="_blank" rel="nofollow">营业执照 </a>
                <a href="#" target="_blank" rel="nofollow">服务条款 </a>
            </div>
            <br>
            <div class="img">
                <img src="../assets/img/d1.png" style="width: 100%;">
            </div>
            <div class="footer-edit">
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">Copyright © 1999 河南AAA有限公司 地址：郑州市新郑市AAA软件教育</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);"> 本网站部分图片来源于网络,如有侵权请联系我们,我们会尽快处理&nbsp;</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">&nbsp;</span>
                    <a href="http://www.baidu.com" target="_blank" style="color: rgb(165, 165, 165);">郑州昆旅国际旅行社太康路营业部</a></p>
                <p style="line-height: 1.0em;">
                <span style="color: rgb(165, 165, 165);">服务热线0371-888888&nbsp;
                    <span style="color: rgb(165, 165, 165);">微信：18838965238&nbsp; 15981917089&nbsp;</span>
                    在线QQ：1479430525&nbsp; 1479430525&nbsp; &nbsp;</span></p>
                <p style="line-height: 1.0em;">
                    <a href="https://www.baidu.com" target="_blank"></a>
                    <span style="color: rgb(165,165,165);">
                        <span style="color: rgb(153, 153, 153); font-family: PingFang SC;,Microsoft Yahei UI, Microsoft Yahei&quot;,Hiragino Sans GB;, Helvetica, STHeiti, sans-serif; background-color: rgb(249, 249, 249);">
                            旅行社业务经营许可证号 L-HEN-CJ00011
                        </span>
                    </span>
                    豫ICP备19990315号
                    <a/>
                </p>
            </div>

        </div>


    </div>
</template>

<script>
    export default {
        name: "ShoppingCart",
        inject:['reload'],//注入reload方法
        data () {
            return {
                // principal: '',
                principal: sessionStorage.getItem("token"),
                username:{
                    phone: sessionStorage.getItem("username"),
                },
                phone1: sessionStorage.getItem('username'),
                mname:'已登录',
                list:null,
                activeIndex: '1',

                tbOrdInf: {
                    tid:'',
                    status:0,
                    payType:'支付宝',
                    payStatus:1,
                    accountId:'',
                    shippingName:'',
                    shippingAddress:'',
                    shippingPhone:'',
                    postWay:'顺丰',
                    postFee:20.00,
                    totalPrice:'',
                    createBy:null,
                    updateBy:null,
                    updateDate:'',
                    remark:null,
                    version:0,
                    state:1
                },
                addressList: '',
            };
        },
        created() {
            if (this.principal === null){
                this.mname = "未登录"
                this.$message({
                    type: 'info',
                    message: '请先登录!'
                });
                this.$router.push('/login')
            }else {
                this.$http.post("product/shoppingCart/selectByPhone",this.username).then(data => {
                    this.list = data;
                })

                this.$http.post('order/address/findByTbid', {accountId: this.phone1}).then(data => {
                    this.addressList = data[0]
                    this.tbOrdInf.shippingName = data[0].realName
                    this.tbOrdInf.shippingAddress = data[0].realAddress
                    this.tbOrdInf.shippingPhone = data[0].realPhone
                })
            }
        },
        methods: {
            gotoBuy(i){
                if (this.addressList === undefined){
                    this.$confirm('暂无默认地址，是否前往个人中心添加地址, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        this.$router.push('/personalCenter')

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消前往'
                        });
                    });
                }else {
                    this.tbOrdInf.accountId = this.phone1
                    this.tbOrdInf.payStatus = i.count
                    this.tbOrdInf.tid = i.tid
                    this.tbOrdInf.totalPrice = i.tbPrdInfoList.price * i.count + this.tbOrdInf.postFee;
                    console.log(this.tbOrdInf)


                    this.$http.post('product/product/compareStore', {tid: this.tbOrdInf.tid ,store: this.tbOrdInf.payStatus}).then(datadd => {
                        console.log(datadd);
                        if (datadd != ''){
                            this.$http.post('product/product/subtractStore', {tid: this.tbOrdInf.tid ,store: this.tbOrdInf.payStatus}).then(res => {
                                if (res){
                                    this.$http.post('order/order/saveOrUpdate1',this.tbOrdInf).then(data => {
                                        if (data != null){
                                            this.$http.post("product/shoppingCart/delete", {sid:i.sid}).then(data => {
                                                console.log("已移除购物车")
                                            })
                                            this.$router.push({path:"/orderDetails",query:{oid:data}})
                                        }
                                    })
                                }
                            })
                        }else {
                            this.$message({
                                type: 'info',
                                message: '很抱歉，库存不足！'
                            });
                        }
                    })
                }

            },
            handleSelect (key, keyPath) {
                console.log(key, keyPath);
            },
            dd1(){
                this.$router.push('/login')
            },
            output(){
                this.$router.replace('product')
                sessionStorage.clear()
                localStorage.clear()
                this.$router.go(0)
            },
            del(sid){
                console.log(sid)
                this.$confirm('此操作将该商品移出购物车, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("product/shoppingCart/delete", {sid:sid}).then(data => {
                        this.$message({
                            type: 'success',
                            message: '移出成功!'
                        });
                        this.reload()//直接调用刷新方法
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消移出'
                    });
                });
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/product/findProductPicByPath?name=`+picPath;
            },
        },
    }
</script>

<style scoped>
    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }


    .brandsDiv{
        margin: auto;
        /*border: 1px solid black;*/
    }
    .brands{
        width: 75%;
        height: 50px;
        list-style: none;
        /*border: 1px solid black;*/
        margin: auto;
    }
    .brands li{
        float: left;
        margin: 10px 10px;
    }
</style>
